<script lang="ts" setup>
import { ref } from "vue";
// import { optType } from "../../../Common/ts/FilterCondition";
import { optType } from "../../../utils/ts/FilterCondition";

const props = defineProps({
  filterOpt: {
    type: Array,
    required: true,
  },
});

const data = ref(props.filterOpt as optType);

const chosenArr = ref<number[]>(data.value.map((_) => 0));

// watch(data, (newVal) => {
//   //...
//   chosenArr.value = newVal.map((val) => 0);
// });
</script>
<template>
  <div class="flex flex-col flex-wrap items-center">
    <div
      v-for="(item, index) in data"
      :key="'cate' + index"
      class="text-sm border-b-1 mt-4 pb-4 w-full last"
    >
      <span class="tip text-gray-400 mr-5">{{ item.title }}</span>
      <span
        v-for="(sub, seq) in item.category"
        :key="'sub' + seq"
        class="cursor-pointer mr-5 rounded pt-1 pl-6 pr-6 inline-block pb-1"
        :class="chosenArr[index] === seq ? 'chosen' : ''"
        @click="chosenArr[index] = seq"
      >
        {{ sub.label }}
      </span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.chosen {
  background-color: #05f;
  color: #fff;
}

.last:last-child {
  border-bottom: 0;
}
</style>
../../../utils/ts/FilterCondition
